<template>
  <el-form  :model="dataForm" :rules="ruleForm"  ref="dataForm" label-width="80px" >
    <el-row >
      <el-col :offset="6" :span="12">
        <el-form-item label="菜单名称" prop="name">
          <el-input placeholder="菜单名称" v-model="dataForm.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row >
      <el-col :offset="6" :span="12">
        <el-form-item label="组件名称" prop="componentName">
          <el-input placeholder="组件名称" v-model="dataForm.componentName"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="6" :span="12">
        <el-form-item label="菜单路径" prop="path">
          <el-input placeholder="菜单路径" v-model="dataForm.path"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="6" :span="12">
        <el-form-item label="组件路径" prop="component">
          <el-input placeholder="组件路径" v-model="dataForm.component"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="6" :span="12">
        <el-form-item label="父组件" prop="pidName">
          <el-input :disabled="true" placeholder="父组件" v-model="dataForm.pidName"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="6" :span="12">
        <el-form-item label="路由别名" prop="alias">
          <el-input placeholder="路由别名" v-model="dataForm.alias"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="6" :span="12">
        <el-form-item label="排序字段" >
          <el-input-number  v-model="dataForm.sortIndex" placeholder="排序字段" :min="0" :max="100" ></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
        <el-col :offset="12" :span="4">
             <el-button type="primary" v-loading="saveLoading" @click="save('dataForm')">保存</el-button>
        </el-col>
    </el-row>

  </el-form>
</template>

<script>
import VueUtil from "@/util/VueUtil";
import {NuoMenuController} from "@/actions/controller";

export default {
  name: "menu-add-update-form",
  data(){
    return{
      dataForm:{
        id:'',
        name: '',
        componentName: '',
        path: '',
        pidName: '',
        pid: '',
        component: '',
        alias: '',
        sortIndex: 0
      },
      saveLoading: false,
      ruleForm:{
        name:[
          { required: true, message: '菜单名称不能为空', trigger: 'blur' },
          { min: 1, max: 64, message: '菜单名称长度为1 - 64个字符', trigger: 'blur' }
        ],
        componentName: [
          { required: true, message: '组件名称不能为空', trigger: 'blur' },
          { min: 1, max: 64, message: '组件名称长度为1 - 64个字符', trigger: 'blur' }
        ],
        path:[
          { required: true, message: '菜单路径不能为空', trigger: 'blur' },
          { min: 1, max: 255, message: '菜单路径长度为1 - 255个字符', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '组件路径不能为空', trigger: 'blur' },
          { min: 1, max: 255, message: '组件路径长度为1 - 255个字符', trigger: 'blur' }
        ],
        alias: [
          { min: 1, max: 255, message: '路由别名长度为1 - 255个字符', trigger: 'blur' }
        ],
        pid:[
          { required: true, message: '父组件不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    init(data){
      this.dataForm = data
    },
    save(dataForm){
      this.$refs[dataForm].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          VueUtil(this).ajax(NuoMenuController.saveMenu,this.dataForm).then(res=>{
            this.saveLoading = false
            VueUtil(this).hint(res.message)
            this.$emit("reload")
            this.$refs[dataForm].resetFields()
            this.destroy()
          }).catch(()=>{
            this.saveLoading = false
          })
        } else {
          this.$message.warning("请完善表单")
          return false;
        }
      });
    },
    destroy(){
      this.dataForm.id = ''
      this.dataForm.pid = ''
      this.dataForm.pidName = ''
    }
  }
}
</script>

<style scoped>

</style>